<template>
    <span class="myswitch" @mouseover.stop.prevent="setFolded(false)" @mouseout.stop.prevent="setFolded(true)">
        <button title="展开或收起" class="ui circular icon button mini " :class="{primary:!folded}">
            <i class="icon icon-zhedieanniu" :class="{openF:!folded}"></i>
        </button>
        <transition name="fade">
            <div v-show="!folded" class="opera-wrapper">
                <span>
                    <button v-if="col.btns.Detail " title="详情" class="ui circular primary icon button mini" @click.stop.prevent="detailCom(col.val)">
                        <i class="icon unhide"></i>
                    </button>
                    <button v-if="col.btns.EDIT &&model_all_loaded" title="编辑" class="ui circular primary icon button mini" @click.stop.prevent="editCom(col.val)">
                        <i class="icon edit"></i>
                    </button>
                    <button v-if="col.btns.FORBID" title="禁用" class="ui circular primary icon button mini" @click.stop.prevent="forbid(col.val)">
                        <i class="minus circle icon"></i>
                    </button>

                    <button v-if="col.btns.DELETE " title="删除" class="ui circular primary icon button mini" @click.stop.prevent="delCom($event,col.val)">
                        <i class="icon remove"></i>
                    </button>
                    <button v-if="col.btns.LevelDown" title="下级" class="ui circular primary icon button mini" @click.stop.prevent="levelDown(col.val)">
                        <i class="icon level down"></i>
                    </button>
                    <opera_extend :col="col" :ctl="ctl"></opera_extend>
                    <opera_dir :col="col"></opera_dir>

                </span>
            </div>
        </transition>
    </span>
</template>
<script>
import tool from 'src/util/tool';
import util from '_util/index';
import logic from '_logic';

import opera_extend from 'components/cell/opera_extend';
import opera_dir from 'components/cell/opera/index';
export default {
    data() {
        return {
            folded: true,
        }
    },
    computed: {
        ctl() {
            return this.$route.query.ctl;
        },
        model_all_loaded() {
            return this.$store.state.global.model_all;
        }
    },
    components: { opera_extend, opera_dir },
    methods: {
        bindTo(){
            var url='http://localhost:8766/index/Tr/bind';
            this.$http.post(url).then((rs) => {
                console.log(rs);
            })
        },
        setFolded(b) {
            if (b !== this.folded) {
                this.folded = b;
            }
        },
        detailCom(id) {
            logic.detail.detailCom(this, this.ctl, id);
            return;//todo
            util.store.commit(this,'setIsDetail', true)
            this.toEdit(id)
        },
        delCom2(id) {
            tool.cl("id2:" + id)
        },
        delCom(event, id) {
            util.showConfirm(this, () => {
                let eventVue = util.store.get(this,'eventVue');
                eventVue.$emit('delCom', id)
            }, { content: '确认要删除吗？' });

        },
        levelDown(id) {
            let eventVue = util.store.get(this,'eventVue');
            eventVue.$emit('levelDown', id)
        },
        editCom(id) {
            util.store.commit(this,'setIsDetail', false)
            this.toEdit(id)
        },
        toEdit(id) {
            let ctl = this.ctl;
            let is_modal_edit = logic.edit.is_modal_edit(this)
            if (!is_modal_edit) {
                let url = `/page/edit?ctl=${ctl}&_id=${id}`
                if (ctl == 'control_group') {
                    url = `/page/control_group/edit?id=${id}&ctl=control_group&title=权限组管理`
                }
                util.jump(this, url)
            } else {

                let url = tool.getApi(this, ctl, 'read');
                util.getDataCom(this, url, { id }, (rs) => {
                    util.store.commit(this,'setOp', 'update');
                    util.store.commit(this,'setEditVo', {});
                    util.store.commit(this,'setEditVo', rs);
                    util.eventEmit(this, 'showModalEdit');
                });

            }

        },
        forbid(id) {

            let eventVue = util.store.get(this,'eventVue');
            eventVue.$emit('forbidCom', id)
            //this.$store.dispatch('',{id:id,ctl:this.$store.state.global.current_ctl});
        },
    },
    props: ['col'],
    created() {
    },
    mounted() {

    }
}
</script>
<style rel="stylesheet/less" lang="less">
@import "../../common/style/mixin";

.fade-transition();
.icon-zhedieanniu {}

.myswitch {
    position: relative;
    display: block;
}

.opera-wrapper {
    position: absolute;
    display: inline-block;
    left: 30px;
    padding-left: 6px;
    top: 0px;
    /*background-color: rgba(255,255,255,0.9);*/
    background-color: transparent;
    z-index: 999;
}
</style>
